import React, { Component } from 'react'
import {Redirect} from 'react-router-dom'
import { Form, Icon, Input, Button, message } from 'antd';
import './login.less'
import {reqLogin} from '../../api'
import memoryUser from '../../utils/memoryUtils'
import storage from '../../utils/storageUtils'


import logo from '../../asset/img/dog.png'

/**
 * 登录页面
 */
class Login extends Component {

  handleSubmit = (e) => {
    // 阻止表单提交
    e.preventDefault();
    this.props.form.validateFields(async(err, values) => {
      if (!err) {
        const {username,password} = values
        const result = await reqLogin(username,password)
        // const result = response.data
        // 请求成功：status: 0, data: {…}

        if (result.status===0) {
          // 提示登陆成功
          message.success('登录成功')
          console.log('111')

          // 保存user
          const user = result.data
          memoryUser.user = user // 存储到内存中
          storage.saveUser(user) // 存储到local

          // 跳转到管理页面(不需要回退到登录页面)
          // 如果同push，则有返回上一页面的功能
          this.props.history.replace('/admin')
        } else {
          message.error(result.msg)
        }
        // 请求失败：status: 1, msg: "用户名或密码不正确!"

        console.log('请求成功',result)
        // console.log('登录成功', values);
      }else {
        console.log('登陆失败')
      }
    });
    // 得到from对象
    // const form = this.props.form
    // // 获取表单项的输入数据
    // const values = form.getFieldsValue()
    // console.log("🚀 ~ file: index.jsx ~ line 20 ~ Login ~ values", values)
  }

  /**
   * 1、请输入你的密码
   * 2、密码至少4位
   * 3、密码最多14位
   * 4、密码必须是英文、数字或下划线组成
   */

  validatorpwd = (rule, value, callback) => {
  // console.log("🚀 ~ file: index.jsx ~ line 24 ~ Login ~ rule, value, callback", rule, value, callback)
    if (!value) {
      callback('请输入你的密码')
    } else if (value.length<4) {
      callback('密码至少4位')
    } else if (value.length>12) {
      callback('密码最多14位')
    } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
      callback('密码必须是英文、数字或下划线组成')
    } else {
      callback() // 验证成功
    }
    // callback() // 验证成功
    // callback('验证失败') // 里面有值代表返回的提示信息
  }

  render() {

    //如果用户已经登录，则自动跳转到后台管理页面
    const user = memoryUser.user
    if (user && user._id) {
      return <Redirect to="/admin" />
    }

    // const form = this.props.form
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login">
        {/* 头部 */}
        <header className="login-header">
          <img src={logo} alt="logo"></img>
          <h2>React项目:后台管理项目</h2>
        </header>
        {/* 内容部分 */}
        <section className="login-content">
          <h2>用户登录</h2>
          <Form onSubmit={this.handleSubmit} className="login-form">
          <Form.Item>
            {getFieldDecorator('username', {
              rules: [
                { required: true, whitespace: true, message: '请输入你的用户名' },
                { min: 4, message: '用户名至少4位' },
                { max: 14, message: '用户名最多14位' },
                { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' },
              ],
            })(
              <Input
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="Username"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{
                validator: this.validatorpwd
              }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="Password"
              />,
            )}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
      </Form>
        </section>
      </div>
    )
  }
}

export default Form.create()(Login);
// const WrapLoginForm = Form.create()(Login);
// export default WrapLoginForm